<template>
	<view class="main">
		<view class="title">
			<view class="title_font">
				<text class="desc">预约详情</text>
				<view class="line"></view>
			</view>
			<view class="orderStatus">
				{{orderStatus}}
			</view>
		</view>
		<view class="detail">
			<view class="item">
				<view class="font">
					<text>预约基地</text>
				</view>
				<view class="content">
					<text>{{item.trainingBaseName}}</text>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>预约时段</text>
				</view>
				<view class="content">
					<view v-for="(str,index) in item.trainingBaseTimeStr.split(',')" :key="index">
						<text>{{str}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>预约用户</text>
				</view>
				<view class="content">
					<u-tag :text="userType" bg-color="#61ABFF" type="dark" color="#fff" size="mini" />
					<text style="margin-left: 10rpx;">{{item.username}}</text>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>联系电话</text>
				</view>
				<view class="content">
					<text>{{item.memberPhone}}</text>
				</view>
			</view>
			<view class="item">
				<view class="font">
					<text>用户单位</text>
				</view>
				<view class="content">
					<text>{{item.trainingBaseName}}</text>
				</view>
			</view>
		</view>
		<u-line color="info" border-style="dashed" />
		<u-line color="info" border-style="dashed" />
		<view class="detail payStatus">
			<view class="item">
				<view class="font">
					<text>下单时间</text>
				</view>
				<view class="content">
					<text>{{item.createTime}}</text>
				</view>
			</view>
			<template v-if="item.isCharge">
				<view class="item">
					<view class="font">
						<text>支付方式</text>
					</view>
					<view class="content">
						<text>{{item.paymentMethod}}</text>
					</view>
				</view>
				<view class="item">
					<view class="font">
						<text>支付时间</text>
					</view>
					<view class="content">
						<text>{{item.paymentTime}}</text>
					</view>
				</view>
			</template>
			<view class="payF">
				<view class="title">
					<text>收费金额</text>
				</view>
				<view class="pay_content">
					<view class="total">
						<text class="icon">￥</text>
						<text class="num">{{item.totalPrice}}</text>
					</view>
					<text class="pay_status">{{orderStatus}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{}
			}
		},
		onLoad(option){
			this.item = JSON.parse(option.val)
			console.log(this.item);
		},
		computed:{
			userType(){
				switch (this.item.userType){
					case "1":
						return "老师"
						break;
					case "2":
						return "社会人士"
						break;	
					default:
						return "学生"
						break;
				}
			},
			orderStatus(){
				switch (this.item.userType){
					case "CANCEL":
						return "用户取消"
						break;
					case "PAID":
						return "已支付"
						break; 
					default:
						return "未支付"
						break;
				}
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.main{
		box-sizing: border-box;	
		margin: 24rpx 30rpx 0 30rpx;
		padding: 27rpx 24rpx 54rpx 24rpx;
		background-color: #fff;
		position: relative;
		.title{
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 82rpx;
			
			
			.orderStatus{
				box-sizing: border-box;
				padding: 6rpx 0rpx;
				background-color: #FFB535;
				border-radius: 0 14rpx 0 14rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				width: 104rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.title_font{
			width: 232rpx;
			margin: 0 auto;
			.line{
				width: 232rpx;
				height: 10rpx;
				border-radius: 12rpx;
				background: #F4333C;
			}
		}
		
	}
	.detail{
		
		.item{
			width: 100%;
			padding: 20rpx 0 30rpx;
			display: flex;
			font-size: 30rpx;
			font-family: PingFang SC;
			justify-content: space-between;
			.font{
				color: #999999;
				padding-right: 4rpx;
			}
			.content{
				color: #333333;
			}
		}
	}
	.payStatus{
		box-sizing: border-box;
		padding-top: 48rpx;
	}
	.payF{
		width: 100%;
		padding: 20rpx 0 30rpx;
		display: flex;
		font-size: 30rpx;
		font-family: PingFang SC;
		justify-content: space-between;
		height: 88rpx;
		box-sizing: border-box;
		.title{
			font-size: 28rpx;
			color: #333333;	
		}
		.pay_content{
			display:flex;
		}
		.total{
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #F4333C;
			.icon{
				font-size: 24rpx;
			}
			.num{
				font-size: 40rpx;
			}
		}
		.pay_status{
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #35B572;
			line-height: 56rpx;
			margin-left: 21rpx;
		}
	}
</style>
